<template>
  <el-drawer
    v-el-close-drawer:[{direction,backgroundColor}]="close"
    :visible.sync="visible"
    :withHeader="false"
    :show-close="false"
    destroy-on-close
    append-to-body
    :size="size"
    :modal="modal"
    :direction="direction"
    :wrapperClosable="wrapperClosable"
    :before-close="beforeClose"
  >
    <div v-if="visible" class="wp-drawer__content">
      <slot></slot>
    </div>
  </el-drawer>
</template>

<script>
import elCloseDrawer from '@/directive/el-close-drawer'
export default {
  name: 'Drawer',
  props: {
    width: { type: [String, Number], default: '30%' },
    modal: { type: Boolean, default: true },
    direction: { type: String, default: 'rtl' },
    backgroundColor: { type: String, default: '#f56c6c' },
    wrapperClosable: { type: Boolean, default: false },
    buttonTop: {
      default: 250,
      type: Number
    }
  },
  directives: {
    elCloseDrawer
  },
  watch: {
    width (val) {
      this.size = val
    }
  },
  components: {},
  data () {
    return {
      size: this.width,
      visible: false
    }
  },
  methods: {
    show () {
      this.visible = true
    },
    beforeClose (done) {
      this.$emit('beforeClose')
      done()
    },
    close () {
      this.visible = false
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-drawer {
  &__content {
    width: 100%;
    height: 100%;
  }
}
</style>
